{template header}
<link rel="stylesheet" href="/static/calendar/js/calendar.css" />
<script type="text/javascript" charset="utf-8" src="/static/calendar/calendar.php"></script>
<script src="/static/bootstrap/js/amap.area.js"></script>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=1f47cfba244d5d93a9e615ee660d1284"></script>
<link rel="stylesheet" href="/static/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="/static/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="/static/kindeditor/lang/zh_CN.js"></script>

<style type="text/css">
    .mapdiv{display: block;}
    .amap-container{display:block;height: 400px; width: 800px}
    .amap-e, .amap-layer, .amap-layers, .amap-maps, .amap-tile, .amap-tile-container{position: relative;}
    img.amap-logo, .amap-copyright,.mapdiv,.rule-div{display: none;}
    .amap-icon img{max-width: 280px;}
</style>
<script type="text/javascript">
    $(function () {
        KindEditor.ready(function(K) {
            K.create('textarea[name="introduce"]', {
                allowFileManager : true,
                uploadJson: './index.php?c=admin&a=uploadKindEditorImg',
                newlineTag:'p',
                filterMode : true,
                htmlTags:{
                    p : ['style','color', 'align', 'class'],
                    font : ['style','color', 'size', 'face', 'class'],
                    span : ['style','style','color', 'align'],
                    div : ['style','class', 'align'],
                    a : ['style','class', 'href', 'target', 'name'],
                    embed : ['style','src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
                    'style', 'align', 'allowscriptaccess', '/'],
                    img : ['style','src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style','data-source','/', 'class'],
                    hr : ['style','class', '/'],
                    br : ['/'],
                    'ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : ['style','align'],
                    'tbody,tr,strong,b,sub,sup,em,i,u,strike,section' : ['style', 'class'],
                },
                afterBlur: function(){this.sync();}
            });
        });        
        var mapObj;
        mapObj = mapInit();
        var coordinates = '{$coordinate}';
        var mapAttr     = '{$mapAttr}';
        var routeAttr   = "{$routeAttr['lineAttr']}";
        var mId         = "{$mInfos['id']}";
        
        //编辑页生成路线
        if (mId != '' && coordinates) {
            var points = JSON.parse(coordinates);
            var lineArr = [];
            var pArr = [];
            
            for (var i in points){
                pArr = points[i].split(',');
                lineArr.push([pArr[0], pArr[1]]);
            }
            
            var mapJson = JSON.parse(mapAttr);
            var centPoint = mapJson.center.split(',');
            //路线绘制
            drowMapLine(lineArr, {"center":[centPoint[0], centPoint[1]], "zoom":mapJson.zoom}, routeAttr);
        } 

        //展开地图
        $('.mapExten').on('click', function() {
           $('.mapdiv').show(); 
        });
        
        $('.clearClickPoint').on('click', function () {
            $("#clickPoint").val('');
            $("#mapZoom").val('');
            $("#mapCenter").val('');
        });

        //预览已绘路线
        $('.previewLine').on('click', function () {
            var cPoint = $("#clickPoint").val();
            var lineArr = new Array(); 

            if (cPoint == '') {
                alert('请先描绘线路');
                return false;
            }

            var pArr = cPoint.split('|');

            for (var i in pArr) {
                var pt = pArr[i].split(',');
                lineArr.push([parseFloat(pt[0]), parseFloat(pt[1])]);
            }

            var lineAttr = $('input[name="lineAttr"]').val(); 
            drowMapLine(lineArr, {"center": mapObj.getCenter(), "zoom": mapObj.getZoom()}, lineAttr);
        });
          
        //关闭预览  
        $('.previewClose').on('click', function() {
            $('#iCenter2').parent().html('<div id="iCenter2"></div>');
        });
        
        //弹层规则添加
        $('.rule-add').on('click', function(){
            $('.rule-div').show();
        });

        //弹层规则确认
        $('.rule-confirm').on('click', function(){
            $('.rule-div').hide();
        });
	
        //表单提交
        $('.form-horizontal').on('submit', function() {
            if ($('#clickPoint').val() != '') {
                $('#mapZoom').val(mapObj.getZoom());
                $('#mapCenter').val(mapObj.getCenter());			
                var mileage = $('.amap-ranging-label:last > span:first').html().match(/\d+\.?\d+/);
                var inputMile = $('input[name="mileage"]').val();
                
                if (inputMile == '') {
                    $('input[name="mileage"]').val(mileage[0]);
                } else {
                    if (mileage[0] != inputMile) {
                        alert('已画路线的里程数('+mileage[0]+')与填写的里程数('+inputMile+')不相等');
                        return false;
                    }
                }
            }
			
			var sTime = $('#start_time_id').val();
			var eTime = $('#end_time_id').val();
			
			if (parseInt(sTime.replace(/[-:\s]+/g, '')) >= parseInt(eTime.replace(/[-:\s]+/g, ''))) {
				alert('活动时间有误');
				return false
			}
            
            if ($('input[name="lineAttr"]').val() == '') {
                $('input[name="lineAttr"]').val('#8A8A8A-5-0.8');
            }
            
            if ($('input[name="runLineAttr"]').val() == '') {
                $('input[name="runLineAttr"]').val('#FF0000-5-1');
            }
			
			var sub = true;

			{if !$canEdit}
				sub = confirm('活动正在进行,确定修改活动吗')
			{/if}
            
            return sub;
        });
        
        //地图路线绘制
        function drowMapLine(lineArr, mapAttr, lineAttr){
            var map = new AMap.Map('iCenter2', {
                resizeEnable: true,
                center: mapAttr.center,
                zoom: mapAttr.zoom
            });

            var sColor = '#8A8A8A';
            var sWeigt = 5;
            var sOpaci = 1;
            
            if (lineAttr != '') {
                var attrArr = lineAttr.split('-');
                sColor = attrArr[0];
                attrArr[1] != undefined && (sWeigt = attrArr[1]);
                attrArr[2] != undefined && (sOpaci = attrArr[2]);
            }
            
            var polyline = new AMap.Polyline({
                path: lineArr, //设置线覆盖物路径
                strokeColor: sColor, //线颜色
                strokeOpacity: sOpaci, //线透明度
                strokeWeight: sWeigt, //线宽
                strokeStyle: "solid", //线样式
                strokeDasharray: [10, 5], //补充线样式
                //isOutline: true
            });
            polyline.setMap(map);
			
			AMap.event.addListener(map,'zoomend',function(e){
				var ma = $('input[name="mapAttr"]').val();
				
				if (ma == '') {
					var mc = map.getCenter();
					var lnglat = mc.getLng() + ',' + mc.getLat()
					ma = {"zoom": map.getZoom(), "center": lnglat}
				} else {
					ma = JSON.parse(ma);
					ma.zoom = map.getZoom();
				}
				
				$('input[name="mapAttr"]').val(JSON.stringify(ma));
			});
		
			AMap.event.addListener(map,'click',function(e){
				var ma = $('input[name="mapAttr"]').val();
				
				if (ma == '') {
					var mc = map.getCenter();
					var lnglat = mc.getLng() + ',' + mc.getLat()
					ma = {"zoom": map.getZoom(), "center": lnglat}
				} else {
					ma = JSON.parse(ma);
					ma.center =  e.lnglat.getLng() + ',' + e.lnglat.getLat();
				}
				
				$('input[name="mapAttr"]').val(JSON.stringify(ma));
			});
        }	
    });
</script>
    
<div class="container-fluid">
  <form enctype="multipart/form-data" method="post" action="/index.php?c=actMarathon&a=marathonaddedit" class="form-horizontal">
    <div class="control-group">
        <label class="control-label">活动标题：</label>
        <div class="controls">
            <input class="input-xxlarge" type="text" name='title' placeholder="请输入活动标题" value="{$mInfos['title']}">
        </div>
    </div>
      
    <div class="control-group">
        <label class="control-label">活动介绍：</label> 
        <div class="controls">
            <textarea rows="10" name="introduce" style="width:800px; min-height:200x;">
                {if $mInfos['introduce']}
                    {$mInfos['introduce']}
                {else}
                    <section class="bg-change p10">
                        <b class="skyblue pb10 db">活动时间</b>
                        <p class="lh23">
                            线上马拉松：7月3日~7月12日<br/>
                            获奖查询时间：7月15日~7月30日<br/>
                            申诉时间：7月15日~7月17日23:59
                        </p>
                    </section>
                    <section class="bg-change p20 mt20">
                        <b class="skyblue pb10 pb10">活动规则</b>
                        <p class="lh23">
                            1、群主须在活动主页完成报名，群组报名前的里程计为无效，群成员最终里程数从加入群组之后开始累计。<br/>
                            2、参加多个报名群组的用户，只能获得一份活动奖品。<br/>
                            3、活动期间，群组所有成员其个人累积跑步里程均完成42.195公里，才能获得完赛奖牌。<br/>
                            4、如发现作弊，将取消整个群组领奖资格。
                        </p>
                    </section>
                {/if}
            </textarea>
        </div>
    </div>
      
    <div class="control-group">
        <label class="control-label" for="inputShortDesc">路线绘制：</label>
        <div class="controls" >
            <div>
                省：
                <select id='province' style="width:100px"  onchange='search(this)'></select>
                市：
                <select id='city' style="width:100px"  onchange='search(this)'></select>
                区：
                <select id='district' style="width:100px" onchange='search(this)'></select>
            </div>
            <div style="margin:5px auto;">
                <btn class="btn mapExten">展开地图信息</btn><btn class="clearClickPoint btn">重新选点</btn>
                <span>鼠标左键单击选点，右键单击结束选点。选点期间，用键盘方向键移动地图中心点，滚轮放大缩小地图</span>
            </div>
            <div class="mapdiv"><div id="iCenter"></div></div>
            <div style="margin:5px auto;">
                <btn class="previewLine btn">路线预览</btn> <btn class="previewClose btn">关闭预览</btn>
            </div>
            <div class="mapdiv"><div id="iCenter2"></div></div>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="inputTiltle">地图属性(可不填)：</label>
        <div class="controls">
            <input type="text" name='mapAttr' placeholder='{"zoom":"缩放比例(4)","center":"中心点坐标(121.473788,31.285139)"}' value='{$mapAttr}' style="width: 450px" >
			例: {"zoom":"14","center":"121.566997,31.310348"}
			<br />
			可以通过缩放预览地图自动设置缩放比例，点击预览地址设置中心点坐标
        </div>
    </div>   
      
    <div class="control-group">
        <label class="control-label" for="inputTiltle">路线属性：</label>
        <div class="controls">
            <input type="text" name='lineAttr' placeholder="#8A8A8A(颜色)-5(线宽度)-0.8(透明度)" value="{$routeAttr['lineAttr']}" style="width: 300px" >
			例: #8A8A8A-5-0.8
		</div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="inputTiltle">已跑路线属性：</label>
        <div class="controls">
            <input type="text" name='runLineAttr' placeholder="#8A8A8A(颜色)-5(线宽度)-0.8(透明度)" value="{$routeAttr['runLineAttr']}" style="width: 300px">
			例: #FF0000-5-1
		</div>
    </div>
    
    {if $mInfos['charge']}  
        <div class="control-group">
            <label class="control-label">活动报名费用(￥)：</label>
            <div class="controls">
				<span>{$mInfos['charge']}</span>
                <!--input class="input-xxlarge" type="text" name='charge' placeholder="活动报名费用" value="{$mInfos['charge']}" style="width: 205px"-->
            </div>
        </div>
    {/if}
      
    <div class="control-group">
        <label class="control-label">活动关联商品ID(多个,隔开)：</label>
        <div class="controls">
            <input class="input-xxlarge" type="text" name='actGoodsId' placeholder="活动关联商品ID(11,12)" {if $mInfos['goods_id']} value="{$mInfos['goods_id']}" {else} value="" {/if}  style="width: 205px">
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label">活动总里程数(km)：</label>
        <div class="controls">
            <input class="input-xxlarge" type="text" name='mileage' placeholder="活动总里程数" value="{$mInfos['total_mileage']}" style="width: 205px">
            <span>请确保填写的里程数与实际已画路线的里程数相等，可不填</span>
        </div>
    </div>
	
    <div class="control-group">
        <label class="control-label">活动弹窗规则配置：</label>
		<div class="controls"><btn class="rule-add btn">添加/修改</btn></div>
    </div>
	
    <div class="control-group rule-div">
        <label class="control-label"></label>
		<div class="controls">
			<p>
				<p>每种类型都可多个(,隔开)，文案加数值作为提示内容(形如：恭喜完成21公里)</p>
				里程：
				<textarea style="width:200px;" name="rule-miletype" rows="5" >{$mileRule}</textarea>
				排名：
				<textarea style="width:200px;" name="rule-ranktype" rows="5">{$rankRule}</textarea>
				时长(min)：
				<textarea style="width:200px;" name="rule-timetype" rows="5">{$timeRule}</textarea>
			</p>
			<p><btn class="rule-confirm btn">确定</btn></p>
		</div>
    </div>
	
    <div class="control-group">
        <label class="control-label">活动弹窗文案(,隔开)：</label>
        <div class="controls">
            <textarea rows="5" name="copycontent" style="width:200px;">{$mInfos['copycontent']}</textarea>
        </div>
    </div>
      
    <div class="control-group">
        <label class="control-label">活动路径图片(464*550)：</label>
        <div class="controls">
            {if !empty($marathon_img['route_img'])}
                <img style="max-height:200px;" src="{$marathon_img['route_img']}" alt="活动路径图片">
            {/if}
            <input type="file" name="routeimg">
        </div>
    </div>
      
    <div class="control-group">
        <label class="control-label">活动标题图片(750*124)：</label>
        <div class="controls">
            {if !empty($marathon_img['title_img'])}
                <img style="max-height:200px;" src="{$marathon_img['title_img']}" alt="活动标题图片">
            {/if}
            <input type="file" name="titleimg">
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label">证书标题图片(320*89)：</label>
        <div class="controls">
            {if !empty($marathon_img['zs_img'])}
                <img style="max-height:200px;" src="{$marathon_img['zs_img']}" alt="证书标题图片">
            {/if}
            <input type="file" name="zsimg">
        </div>
    </div>
      
    <div class="control-group">
        <label class="control-label">活动状态：</label>
        <div class="controls">
            <select name="status" style="width: 80px;">
                <option value="0" {if $mInfos['status'] == 0}selected="selected"{/if}>未开始</option>
                <option value="1" {if $mInfos['status'] == 1}selected="selected"{/if}>进行中</option>
                <option value="2" {if $mInfos['status'] == 2}selected="selected"{/if}>已结束</option>
            </select>
        </div>
    </div>
	
    <div class="control-group">
        <label class="control-label">初始参赛人数：</label>
        <div class="controls">
			<input type="text" style="width: 100px" value="500" placeholder="初始参赛人数：" name="initial_joins">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">开始时间：</label>
        <div class="controls">
        <input type="text" name="starttime" id="start_time_id" value="{eval if($mInfos['start_time']) echo date('Y-m-d H:i:s', $mInfos['start_time']); else echo date('Y-m-d H:i:s', time());}">
            <input type="button" id="start_time_btn" onclick="return showCalendar('start_time_id', '%Y-%m-%d %H:%M:%S', '24', false, 'start_time_btn');" value="选择" class="button" id="start_time_id"/>
        </div>
    </div>
      
    <div class="control-group">
        <label class="control-label">结束时间：</label>
        <div class="controls">
        <input type="text" name="endtime" id="end_time_id" value="{eval if ($mInfos['end_time']) echo date('Y-m-d H:i:s', $mInfos['end_time']); else echo date('Y-m-d H:i:s', time());}">
            <input type="button" id="end_time_btn" onclick="return showCalendar('end_time_id', '%Y-%m-%d %H:%M:%S', '24', false, 'end_time_btn');" value="选择" class="button" id="end_time_id"/>
        </div>
    </div>  
      
    <div class="control-group">
        <div class="controls">
            <input type="hidden" name="marathonId" value="{$mInfos['id']}">
            <input type="hidden" name="clickPoint" id="clickPoint" >
            <input type="hidden" name="mapZoom" id="mapZoom">
            <input type="hidden" name="mapCenter" id="mapCenter">
			<button type="submit" class="btn">提交</button>
        </div>
    </div>
  </form>
</div>
{template footer}